<template>
  <div>
    <el-container id="add">
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>数据应用</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">车辆备案查询</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main style="overflow-y:auto">
        <div class="inside-main-box">
           <el-row class="inside-main" style="height: 116px">
             <el-col :span="4" style="margin-left: 5px">
               <el-form-item label="出入类型" size="small">
                 <el-select clearable v-model="form.typeOfAcces" placeholder="请选择">
                   <el-option label="入厂" value="入厂" />
                   <el-option label="出厂" value="出厂" />
                 </el-select>
               </el-form-item>
             </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="车牌号" size="small">
                <el-input clearable v-model="form.cl_cph" style="width:200px;margin-left:13px" maxLength="8" placeholder="请输入车牌号" />
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-left: 5px">
              <el-form-item label="出入日期" size="small">
                <el-date-picker clearable v-model="form.ThreestartDateTime" style="width: 100%" type="date" placeholder="选择时间" />
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.ThreeendDateTime" type="date" placeholder="选择时间" style="width: 92%"/>
              </el-form-item>
            </el-col>
             <el-col :span="4" style="margin-left: 5px">
               <el-form-item label="司机姓名" size="small">
                 <el-input clearable v-model="form.sj_name" style="width:183px" maxLength="8" placeholder="请输入司机姓名" />
               </el-form-item>
             </el-col>
             <el-col :span="4" style="margin-left: 5px">
               <el-form-item label="司机电话" size="small">
                 <el-input clearable v-model="form.sj_phone" style="width:183px;" maxLength="11" placeholder="请输入司机电话" />
               </el-form-item>
             </el-col>
             <el-col :span="4" style="margin-left: 5px">
               <el-form-item label="运输货物" size="small">
                 <el-input clearable v-model="form.cargo_type" maxLength="100" placeholder="请输入运输货物" />
               </el-form-item>
             </el-col>
            <el-col :span="5" style="margin-left: 5px">
              <el-form-item label="注册日期" size="small">
                <el-date-picker clearable v-model="form.TwostartDateTime" style="width: 100%" type="date" placeholder="选择时间" />
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.TwoendDateTime" type="date" placeholder="选择时间" style="width: 92%"/>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left:5px">
              <el-form-item label="排放阶段" size="small">
                <el-select clearable  v-model="form.vehicleEmissions" placeholder="请选择">
                  <el-option label="国0" value="国0" />
                  <el-option label="国Ⅰ" value="国Ⅰ" />
                  <el-option label="国Ⅱ" value="国Ⅱ" />
                  <el-option label="国Ⅲ" value="国Ⅲ" />
                  <el-option label="国Ⅳ" value="国Ⅳ" />
                  <el-option label="国Ⅴ" value="国Ⅴ" />
                  <el-option label="国Ⅵ" value="国Ⅵ" />
                  <el-option label="新能源" value="新能源" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectFiling">查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
              <el-button size="small" class="empty-but" icon="download" @click="exportExcelData(form)">导出</el-button>
            </el-col>
          </el-row>
        </div>
         <div style="height: 20px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
         </div>
        <div>
          <el-table :data="tableData" style="width: 100%;" height="200">
            <el-table-column  align="center" type="index" label="序号"  width="50px"/>
            <el-table-column align="center" prop="gateno"  label="道闸编号" width="160px"  show-overflow-tooltip />
            <el-table-column align="center" prop="cl_cph" label="车牌"  show-overflow-tooltip  />
            <el-table-column align="center" prop="sj_name" label="司机"  show-overflow-tooltip />
            <el-table-column align="center" prop="vehicleMessage.sj_phone" label="司机电话"  show-overflow-tooltip />
            <el-table-column align="center" prop="vehicleEmissions" label="排放阶段" show-overflow-tooltip />
            <el-table-column align="center" prop="vehicleMessage.cl_sbm"  label="车辆识别代码(VIN)" width="140px" show-overflow-tooltip/>
            <el-table-column align="center" prop="vehicleMessage.cl_fdjhm" label="发动机号码"  show-overflow-tooltip />
            <el-table-column align="center" prop="register.cargo_type" label="运输货物" show-overflow-tooltip  />
            <el-table-column align="center" prop="register.cl_huowushuliang" label="运输货量/吨" show-overflow-tooltip />
            <el-table-column align="center" prop="applicant" label="申请人"   show-overflow-tooltip />
            <el-table-column align="center" prop="applicationTime" label="申请时间" width="160px" show-overflow-tooltip
                             :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" fixed="right" label="操作"  width="200" >
              <template #default="scope">
                <el-button link type="success" icon="check" size="small" @click="whiteList(scope.row)">白名单</el-button>
                <el-button link type="danger" icon="close" size="small" @click="blackList(scope.row)">黑名单</el-button >
              </template>
           </el-table-column>
          </el-table>
        </div>
        <div style="height: 20px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
        </div>
           <div>
          <el-table :data="tableListData" style="width: 100%;" height="460">
            <el-table-column  align="center" type="index" label="序号"  width="50px"/>
            <el-table-column align="center" prop="status_a" label="结果" show-overflow-tooltip >
              <template #default="scope">
                <span v-if="scope.row.status_a == 1">通过</span>
                <span v-if="scope.row.status_a == 0">未通过</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="gateno" label="道闸编号" width="160px" show-overflow-tooltip/>
            <el-table-column align="center" prop="typeOfAcces"  label="出入类型"  show-overflow-tooltip/>
            <el-table-column align="center" prop="accessTime"  label="出入时间" width="160px" show-overflow-tooltip
              :formatter="function(row,column){ if(row.accessTime){ return $moment(row.accessTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="applicant" label="申请人" show-overflow-tooltip/>
            <el-table-column align="center" prop="applicationTime" label="申请时间" width="160px" show-overflow-tooltip
               :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="cl_cph" label="车牌号" show-overflow-tooltip/>
            <el-table-column align="center" prop="environmentalProtectionRegistrationCode" label="环保登记编码" width="100px"  show-overflow-tooltip/>
            <el-table-column align="center" prop="vehicleEmissions" label="排放阶段"  show-overflow-tooltip/>
            <el-table-column align="center" prop="cargo_type" label="运输货物" show-overflow-tooltip/>
            <el-table-column align="center" prop="cl_huowushuliang" label="运输货量/吨" show-overflow-tooltip/>
            <el-table-column align="center" prop="sj_name" label="司机姓名" show-overflow-tooltip/>
            <el-table-column align="center" prop="sj_phone" label="司机电话"  show-overflow-tooltip/>
            <el-table-column align="center" prop="registernDate" label="注册时间" show-overflow-tooltip/>
            <el-table-column align="center" prop="cl_sbm" label="车辆识别代码(VIN)" width="140px" show-overflow-tooltip/>
            <el-table-column align="center" prop="cl_fdjhm" label="发动机号"  show-overflow-tooltip/>
          </el-table>
          <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"
                         v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
           size="small" layout="prev, pager, next, jumper,total"
           :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Plus, UploadFilled } from "@element-plus/icons-vue";
import {
    selectAllFiling,
  selectQueryFiling,
  selectVehicleFilingDetailed,
  selectVehicleFilingData
} from "@/api/mobilePollution"
// 路由
import { useRouter } from "vue-router";
// 文件导入
import { ElMessage, ElMessageBox } from "element-plus";
import * as XLSX from "xlsx";
import moment from "moment";
import {recordedListOutP,recordedListOutS} from "@/api/leadingOut";
const router = useRouter();
onMounted(() => {
  // document.querySelector('#add')['style'].height
  //     = (document.documentElement.clientHeight - 90) + 'px';
  selectQuery();
  selectFiling()

});
let table = reactive({
  rows: [],
  total: 0,
});
//分页
const queryInfo = reactive({
  pagenum:1,
  pagesize:10,
  total:0
})
const handleSizeChange = (val) => {
  queryInfo.pagesize = val
  selectFiling()
}
//点击第几页
const handleCurrentChange = (val) => {
  queryInfo.pagenum = val
  selectFiling()
}
//查询明细表
const selectFiling = () =>{
  if(form.typeOfAcces || form.cl_cdmc || form.cl_cph || form.ThreestartDateTime || form.ThreeendDateTime || form.sj_name ||
      form.sj_phone || form.cargo_type || form.TwostartDateTime || form.TwoendDateTime || form.vehicleEmissions){
    if (form.ThreestartDateTime){
      form.ThreestartDateTime = moment(form.ThreestartDateTime).format('YYYY-MM-DD')
    }
    if (form.ThreeendDateTime){
      form.ThreeendDateTime = moment(form.ThreeendDateTime).format('YYYY-MM-DD')
    }
    if (form.TwostartDateTime){
      form.TwostartDateTime = moment(form.TwostartDateTime).format('YYYY-MM-DD')
    }
    if (form.TwoendDateTime){
      form.TwoendDateTime = moment(form.TwoendDateTime).format('YYYY-MM-DD')
    }
    selectVehicleFilingData(form).then((res)=>{
      tableData.value = res.data
    })
    form.pageSize = queryInfo.pagesize
    form.pageNum = queryInfo.pagenum
    selectVehicleFilingDetailed(form).then((res)=>{
      tableListData.value = res.data.list
      queryInfo.total=res.data.total;
    })

  }else{
    console.log('没传搜索条件')
    ElMessage.warning("请输入搜索条件")
  }
}
//查询全部
// const select = () => {
//   selectQueryFiling({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res)=>{
//     // tableData.value = res.data.list;
//     queryInfo.total=res.data.total;
//   })
// }

//根据条件查询
const selectQuery = () => {
//   if (form.startDateTime){
//     let startDate = moment(form.startDateTime).format('YYYY-MM-DD')
//     form.startDateTime =  startDate
//   }
//   if (form.endDateTime){
//     let endDate = moment(form.endDateTime).format('YYYY-MM-DD')
//     form.endDateTime =  endDate
//   }
//   form.pageNum = queryInfo.pagenum
//   form.pageSize = queryInfo.pagesize
//   selectQueryFiling(form).then((res)=>{
//     // tableData.value = res.data.list
//     queryInfo.total=res.data.total;
//   })
}
const form = reactive({});
// 重置
const onReset = () => {
  form.typeOfAcces = '';
  form.cl_cdmc = '';
  form.cl_cph = '';
  form.ThreestartDateTime = '';
  form.ThreeendDateTime = '';
  form.sj_name = '';
  form.sj_phone = '';
  form.cargo_type = '';
  form.TwostartDateTime = '';
  form.TwoendDateTime = '';
  form.vehicleEmissions = '';
  queryInfo.pagesize ='10';
  queryInfo.pagenum='1'
  tableData.value = []
  tableListData.value = []
  outP.value =[]
  outS.value = []
};
// 表格假数据
const tableData = ref()
const tableListData = ref()
// 导出英文（数据库字段）
// const exportExcel = () => {
//   const data = XLSX.utils.json_to_sheet(tableData.value); //此处tableData.value为表格的数据
//   const wb = XLSX.utils.book_new();
//   XLSX.utils.book_append_sheet(wb, data, "test-data"); //test-data为自定义的sheet表名
//   XLSX.writeFile(wb, "车辆备案查询.xlsx"); //test.xlsx为自定义的文件名
// };
//导出工序(中文)
const exportExcelData = (form) => {
  ElMessageBox.confirm("确定要导出吗?").then(()=>{
    recordedListOutP(form).then((res) => {
      if(res.data.length== 0){
        ElMessage.error("未查询到数据")
      } else {
        outP.value = res.data
        recordedListOutS(form).then((res) => {
          outS.value = res.data
          exportExcel()
        })
      }
    })

    })
}
const outP = ref()
const outS = ref()
const exportExcel = () => {

  let exportData = []
  let exportDataDetailed = []
  //导出数据结构构造
  outP.value.forEach(item => {
    if(item.accessTime){
      item.accessTime = moment(item.accessTime).format('YYYY-MM-DD hh:mm:ss')
    }else{
      item.accessTime = ''
    }
    if(item.applicationTime) {
      item.applicationTime = moment(item.applicationTime).format('YYYY-MM-DD hh:mm:ss')
    }else {
      item.applicationTime = ''
    }
    exportData.push({
      gateno: item.gateno ? item.gateno : '',
      cl_cph: item.cl_cph ? item.cl_cph : '',
      sj_name: item.sj_name ? item.sj_name : '',
      sj_phone: item.vehicleMessage?.sj_phone ? item.vehicleMessage?.sj_phone : '',
      registernDate: item.vehicleMessage?.registernDate ? item.vehicleMessage?.registernDate : '',
      accessTime: item.accessTime ? item.accessTime : '',
      vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
      cl_sbm: item.vehicleMessage?.cl_sbm ? item.vehicleMessage?.cl_sbm : '',
      cl_fdjhm: item.vehicleMessage?.cl_fdjhm ? item.vehicleMessage?.cl_fdjhm : '',
      cargo_type: item.register?.cargo_type ? item.register?.cargo_type : '',
      cl_huowushuliang: item.register?.cl_huowushuliang ? item.register?.cl_huowushuliang : '',
      applicant: item.applicant ? item.applicant : '',
      applicationTime: item.applicationTime ? item.applicationTime : ''
    })
  })
  //导出表头设计
  let head = {
    gateno:'道闸编号',
    cl_cph:'车牌号',
    sj_namea:'司机姓名',
    sj_phone:'司机电话',
    registernDate:'注册时间',
    accessTime:'出入时间',
    vehicleEmissions:'排放阶段',
    cl_sbm:'车辆识别代码(VIN)',
    cl_fdjhm:'发动机号码',
    cargo_type:'运输货物',
    cl_huowushuliang:'运输货量/吨',
    applicant:'申请人',
    applicationTime:'申请时间'
  }
  //表头数据切换
  const list = exportData.map(item => {
    const obj = {}
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k]
      }
    }
    return obj
  })
  //明细表导出数据结构构造
  outS.value.forEach(item => {
    item.result = item.result == '0'?'未通过':'通过'
    if(item.accessTime){
      item.accessTime = moment(item.accessTime).format('YYYY-MM-DD  hh:mm:ss')
    }else{
      item.accessTime = ''
    }
    if(item.applicationTime) {
      item.applicationTime = moment(item.applicationTime).format('YYYY-MM-DD hh:mm:ss')
    }else {
      item.applicationTime = ''
    }
    exportDataDetailed.push({
      status_a: item.status_a ? item.status_a : '',
      gateno: item.gateno ? item.gateno : '',
      typeOfAcces: item.typeOfAcces ? item.typeOfAcces : '',
      accessTime: item.accessTime ? item.accessTime : '',
      registernDate: item.registernDate ? item.registernDate : '',
      cl_cph: item.cl_cph ? item.cl_cph : '',
      sj_name: item.sj_name ? item.sj_name : '',
      sj_phone: item.sj_phone ? item.sj_phone : '',
      environmentalProtectionRegistrationCode: item.environmentalProtectionRegistrationCode ? item.environmentalProtectionRegistrationCode : '',
      vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
      cl_sbm: item.cl_sbm ? item.cl_sbm : '',
      cl_fdjhm: item.cl_fdjhm ? item.cl_fdjhm : '',
      cargo_type: item.cargo_type ? item.cargo_type : '',
      cl_huowushuliang: item.cl_huowushuliang ? item.cl_huowushuliang : '',
      applicant: item.applicant ? item.applicant : '',
      applicationTime: item.applicationTime ? item.applicationTime : ''
    })
  })
  //导出表头设计
  let headDetailed = {
    status_a:'结果',
    gateno:'道闸编号',
    typeOfAcces:'出入类型',
    accessTime:'出入时间',
    registernDate:'注册时间',
    cl_cph:'车牌号',
    sj_name:'司机姓名',
    sj_phone:'司机电话',
    environmentalProtectionRegistrationCode:'环保登记编码',
    vehicleEmissions:'排放阶段',
    cl_sbm:'车辆识别代码(VIN)',
    cl_fdjhm:'发动机号码',
    cargo_type:'运输货物',
    cl_huowushuliang:'运输货量/吨',
    applicant:'申请人',
    applicationTime:'申请时间'
  }
  //表头数据切换
  const listDetailed = exportDataDetailed.map(item => {
    const objDetailed = {}
    for (const k in item) {
      if (headDetailed[k]) {
        objDetailed[headDetailed[k]] = item[k]
      }
    }
    return objDetailed
  })
  // 创建工作表
  const data = XLSX.utils.json_to_sheet(list)
  const dataDetailed = XLSX.utils.json_to_sheet(listDetailed)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  XLSX.utils.book_append_sheet(wb, dataDetailed, 'dataDetailed')
  // 生成文件并下载
  XLSX.writeFile(wb, '车辆备案查询.xlsx')

}
//跳转至黑名单新增信息
const blackList = (row) => {
  ElMessageBox.confirm("确定要添加该车辆至黑名单吗?").then(()=>{
    localStorage.setItem("blackListCph", JSON.stringify(row.cl_cph));
    router.push({
      path:'/blackListIndex',
      query:{
        // cph :row.cl_cph
      }
    })
  })
}
//跳转至白名单新增信息
const whiteList = (row) => {
  ElMessageBox.confirm("确定要添加该车辆至白名单吗?").then(()=>{
    localStorage.setItem("whiteListCph",JSON.stringify(row.cl_cph))
    router.push({
      path:'/whiteListIndex',
    })
  })
}
</script>
<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}

.add-but {
  background: #dde5fe;
  color: #3780b9;
}
/* 分页 */

.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
